<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>表格案例</title>

    <!-- <link rel="stylesheet" href="./tabledemo.css"> -->
    <style>

        #title-div {

            width: 95%;

            height: max-content;

            margin-left: auto;

            margin-right: auto;

            padding-top: 20px;

        }


        #title-div span:nth-of-type() { /*按照类型查找*/

            color: #5f8b9d;

            font-size: 20px;

            font-weight: 500;

        }


        #title-div i {

            margin-left: 5px;

            color: #449dfd;

        }


        #title-div span:nth-of-type() { /*按照类型查找*/

            color: #FFFFFF;

            font-size: 20px;

            font-weight: 500;

            background-color: #007bff;

            float: right;

            padding: 8px;

            border-radius: 5px;

            position: relative;

            top: -8px;

            user-select: none; /*用户不可选中文本内容*/

        }


        /* 表格内容部分 */

        #data-table {

            width: 95%;

            margin-left: auto;

            margin-right: auto;

            margin-top: 20px;

            border-collapse: collapse;

            color: #6d757b;

            font-size: 18px;

            table-layout: fixed; /*不随内容变换宽度*/

            word-break: break-all;

        }


        #data-table tbody tr:nth-child(2n) { /*奇偶行变色*/

            background-color: #f2f2f2;

        }</style>

</head>

<body>

<div id="container">

    <!-- title -->

    <div id="title-div">

        <span>Tables&nbsp;&nbsp;&nbsp;|</span>

        <i class="bi bi-house-door"></i>

        <span>Settings</span>

    </div>

    <!-- 表格部分 -->

    <div id="table-wrapper-div">

        <div>DataTable Example</div>

        <div>

            <table id="data-table" border="1">

                <!-- 表格内容省略 -->

            </table>

        </div>

    </div>

</div>

</body>

</html>




